<template>
	<view class="app-ecology">
		<uni-nav-bar
		statusBar="true" 
		:fixed="true" 
		backgroundColor="#eff3f7"
		leftIcon="back"
		@click-left="clickClose"
		:border="false">
			<view class="index-top-nav-title">
				{{i18n.myPower}}
			</view>
		</uni-nav-bar>
		<template v-if="list.length > 0">
			<view class="content">
				<view class="li o1" v-for="(item, index) in list" :key="index" :class="{gray: item.day ==0}" >
					<view class="li-item-top">
						<view class="right">
							<view class="progress-item">
								<view class="progress progress1">
									<view class="long"><view class="short"></view></view>
									<text>{{i18n.expectedProfits}} ({{item.all_cz}})</text>
								</view>
								<view class="progress progress2">
									<view class="long"><view class="short"></view></view>
									<text>{{i18n.computingPower}} ({{item.freeze}})</text>
								</view>
							</view>
							<view class="progress-item">
								<view class="progress progress3">
									<view class="long"><view class="short"></view></view>
									<text>{{i18n.hashRatio}} ({{item.jt_bl}})</text>
								</view>
								<view class="progress progress4">
									<view class="long"><view class="short"></view></view>
									<text>{{i18n.EarnedRevenue}} ({{item.ycb_num}})</text>
								</view>
							</view>
						</view>
						
						<view class="order">
							<text class="grade">{{item.title}} <text class="inner-grade">{{i18n.ji}}</text></text>
							<text class="line"></text>
							<text class="inner-order">0{{item.lun}}</text>
						</view>
					</view>
					<view class="li-item-bottom">
						<view hover-class="active" @tap="jumpDetail(item)">
							{{i18n.bili}}
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="nodata" v-if="list.length == 0">
				{{i18n.nodata}}
			</view>
		</template>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import {showToast,pageto,fetch,pageback,forceUpdate, _updataTabBar,check_login} from "../../common/js/util.js";
	import {mapGetters} from "vuex";
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
	import Load from '../../components/common/load.vue';
	import uCharts from '../../common/js/u-charts.js';
	var _self;	
	export default {
		components:{
			uniNavBar,Load
		},
		data() {
			return {
				showLoad:false,
				list: [],
				cWidth3:'',//圆弧进度图
				cHeight3:'',//圆弧进度图
				arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
				pixelRatio:1
			}
		},
		computed: {
			i18n () {
				return this.$t('message')
			},
			...mapGetters([
				'getLoginInfo',
				"getTextArr",
				'getLangType',
				'getRequestUrl'
			])
		},
		onLoad () {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if( res.pixelRatio > 1 ){
						_self.pixelRatio =2;
					}
				}
			});
			//#endif
			this.cWidth3=uni.upx2px(230);
			this.cHeight3=uni.upx2px(230);
			this.arcbarWidth=uni.upx2px(8);
		},
		onShow() {
			this._getList();
		},
		methods:{
			jumpDetail(item){
				uni.navigateTo({
					url:'/pages/bill/bill'
				})
			},
			showArcbar3(canvasId, chartData){
				new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize: 11,
					legend: false,
					title: {
						name: chartData.series[0].day,
						color: '#1D7DFF',
						fontSize: 25*_self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,
						color: '#a4a4a4',
						fontSize: 15*_self.pixelRatio
					},
					extra: {
						arcbar:{
							type:'circle',//整圆类型进度条图
							width: _self.arcbarWidth*_self.pixelRatio,//圆弧的宽度
							startAngle: 1.5//整圆类型只需配置起始角度即可
						}
					},
					background: '#f00',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth3*_self.pixelRatio/1.5,
					height: _self.cHeight3*_self.pixelRatio/1.5,
					dataLabel: true,
				});
			},
			clickClose() {
				pageback()
			},
			_getList() {
				let _data = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token
				}
				this.showLoad = true;
				fetch(this.getRequestUrl + '/api/shop/tz_list', _data, "post")
					.then(res => {
						// console.log(res)
						this.showLoad = false;
						// check_login(res, this.getLoginInfo);
						if (res.data.code == 1) {
							this.list = res.data.data;
							this.list.forEach(item => {
								item.all_cz = parseFloat(item.all_cz) || parseFloat(item.all_cz) + ' ';
								item.sl = parseFloat(item.sl) || parseFloat(item.sl) + '0';
								item.day_cb = parseFloat(item.day_cb) || parseFloat(item.day_cb) + ' ';
								item.ycb_num = parseFloat(item.ycb_num) || parseFloat(item.ycb_num) + ' ';
							})
						} else {
							showToast(res.data.msg)
						}
					})
					.catch(err => {
						this.showLoad = false;
						showToast(this.i18n.request_fail)
					})
			}
		},
		watch: {
			list(newArr) {
				newArr.forEach((item, index) => {
					let Arcbar3 = {
						series: [
							{
								color: "#1d7dff",
								data: item.day / item.all_day || 0,
								index: 0,
								legendShape: "circle",
								name: this.i18n.tian,
								pointShape: "circle",
								show: true,
								type: "arcbar",
								_proportion_: 0.19999829999999985,
								width: '4',
								day: item.day
							}
						]
					}
					_self.showArcbar3('canvasArcbar'+index, Arcbar3);
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #eff3f7;
}
.app-ecology {
	.index-top-nav-title{
		font-size: 30upx;
		font-weight: bold;
		color: #000000;
		margin-left: -50upx;
	}
	.nodata{
		color: #5A5A5A;
		font-size:22upx;
		text-align: center;
	}
	.content {
		padding: 0 30upx;
		.li {
			background-color: #FFFFFF;
			border-radius: 10upx;
			margin-bottom: 30upx;
			.li-item-bottom{
				text-align: right;
				height: 57upx;
				padding: 0 27upx 27upx;
				position: relative;
				view{
					position: absolute;
					top: 0;
					right: 27upx;
					width: 124upx;
					height: 57upx;
					text-align: center;
					border-radius: 8upx;
					border: 2upx solid #1d7dff;
					color: #1d7dff;
					background-color: #dfedff;
					font-size:24upx;
					line-height: 57upx;
					&.active{
						background-color: #007AFF;
						color: #FFFFFF;
					}
				}
			}
			.li-item-top{
				padding: 20upx 30upx 4upx;
				display: flex;
				justify-content: space-between;
				position: relative;
				.order {
					position: absolute;
					right: 20upx;
					top: 0;
					width: 100upx;
					color: #FFFFFF;
					text-align: center;
					background: linear-gradient(top, #0C48E0, #2AA2FF);
					border-bottom-left-radius: 8upx;
					border-bottom-right-radius: 8upx;
					display: flex;
					flex-direction: column;
					padding-top: 14upx;
					padding-bottom: 10upx;
					.grade {
						font-size: 12px;
						padding-bottom: 12upx;
						.inner-grade {
							font-size: 14px;
						}
					}
					.line {
						margin: 0 10upx;
						border-bottom: 1upx dashed rgba(255, 255, 255, .5);
					}
					.inner-order {
						font-size: 11px;
						margin-top: 6upx;
					}
				}
				&.full {
					width: 690upx;
				}
				.right {
					margin-right: 100upx;
					flex: 1;
					justify-content: space-between;
					align-items: center;
					margin-left: 40upx;
					.progress-item{
						display: flex;
						.progress {
							flex: 1;
							margin-right: 20upx;
							&:last-child{
								margin-right: 0;
							}
							margin-top: 20upx;
							.long {
								background-color: #ddeaf8;
								height: 27upx;
								width: 100%;
								border-radius: 8upx;
								overflow: hidden;
							}
							.short {
								background-color: #1d7dff;
								height: 27upx;
								width: 8px;
							}
							text {
								color: #3E4754;
								margin-top: 8upx;
								font-size: 13px;
							}
						}
					}
				}
				&.gray {
					.order {
						background: linear-gradient(to bottom, #0C48E0, #2AA2FF);
					}
					.percent-top {
						color: #666666;
					}
					.short {
						background-color: #666666;
					}
				}
			}
		}
	}
}
</style>
